<?php
/* @var $this SiteController */

$this->pageTitle=Yii::app()->name;
?>
<style>
<!--
#news_c ul {
    margin: 0;
    padding: 0px 12px;
}
#news_c li {
    background: url("<?php echo IMG_URL;?>/news_arrow.png") no-repeat scroll left center rgba(0, 0, 0, 0);
    float: left;
    height: 20px;
    margin-bottom: 8px;
    overflow: hidden;
    padding-left: 12px;
    width: 345px;
}
#news_c li a {
    color: #353131;
    text-decoration: none;
}
#news_c li a:hover {
    color: #099d2e;
    text-decoration: underline;
}
#left {
    float: left;
    height: 20px;
    line-height: 16px;
    overflow: hidden;
    padding: 2px 0;
    text-align: left;
}
#right {
    float: right;
    font-size: 12px;
    height: 12px;
    line-height: 12px;
    padding-top: 5px;
    text-align: left;
}
-->
</style>
<script type="text/javascript" src="<?php echo JS_URL; ?>/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="<?php echo JS_URL; ?>/highcharts.js"></script>
<script type="text/javascript" src="<?php echo JS_URL; ?>/exporting.js"></script>
<script type="text/javascript" src="<?php echo JS_URL; ?>/bplayer.js"></script>

<div class="topvebanner">
  <div id="myjQuery">
    <div id="myjQueryContent">
    <?php 
        $banner_flag = 1;
        foreach ($banner_list as $_key=>$_value){
    ?>
         <div <?php if($banner_flag) $banner_flag=0;  else echo 'class="smask"';?> >
            <a href="<?php echo $_value['banner_url']; ?>" target="_blank">
                <img src="<?php echo './assets/upload/image/'.$_value['banner_imgpath']; ?>" 
                    title="<?php echo $_value['banner_remark']; ?>">
            </a>
         </div>
    <?php 
        }
    ?>
    </div>
    <ul id="myjQueryNav">
      <li class="current"></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</div>

<script  type="text/javascript" >
$(function () {                                                                     
    $(document).ready(function() {                                                  
        Highcharts.setOptions({                                                     
            global: {                                                               
                useUTC: false                                                       
            }                                                                       
        });                                                                         
                                                                                    
        var chart;  
        var showPointNum = 20; 		//统计图显示节点数目
        var timeInterval = 5000;	//时间间隔（单位：ms）                                                              
        $('#container').highcharts({                                                
            chart: {                                                                
                type: 'spline',                                                     
                animation: Highcharts.svg, // don't animate in old IE               
                marginRight: 10,                                                    
                events: {                                                           
                    load: function() {                                              
                                                                                    
                        // set up the updating of the chart each second             
                        var series = this.series[0]; 
                                                     
                        setInterval(function() { 

                        	var x,y;   
                        	x = (new Date()).getTime();  
                        	   
                        	$.ajax({
                        		type: "post",

                                url: "index.php?r=ajax/graph",

                                dataType: "json",

                                async:false,

                                success: function(result){

									y=result.info;
                                },
                            	error: function(){
									y=series.data[series.data.length-1].y;
                                }
                            });                     
                            /* var x = (new Date()).getTime(), // current time         
                                y = Math.random();    */

                           	var isShift =  (series.data.length>=showPointNum);
                            series.addPoint([x, y], true, isShift);                             
							/* if(parseInt(x/1000%5)>2)
							{
                            	series.addPoint([x, y], true, true);
							} */                    
                        }, timeInterval);                                                   
                    }                                                               
                }                                                                   
            },                                                                      
            title: {                                                                
                text: '实时监控'                                            
            },                                                                      
            xAxis: {                                                                
                type: 'datetime',                                                   
                tickPixelInterval: 100                                              
            },                                                                      
            yAxis: {                                                                
                title: {                                                            
                    text: '温度（℃）'                                                   
                },                                                                  
                plotLines: [{                                                       
                    value: 0,                                                       
                    width: 1,                                                       
                    color: '#808080'                                                
                }]                                                                  
            },                                                                      
            tooltip: {                                                              
                formatter: function() {                                             
                        return '<b>'+ this.series.name +'</b><br/>'+                
                        Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+
                        Highcharts.numberFormat(this.y, 1)+"℃";                         
                }                                                                   
            },                                                                      
            legend: {                                                               
                enabled: false                                                      
            },                                                                      
            exporting: {                                                            
                enabled: false                                                      
            },                                                                      
            series: [{                                                              
                name: '温度监控',                                                
                data: (function() {                                                 
                    // generate an array of random data                             
                    var data = [],                                                  
                        time = (new Date()).getTime(),                              
                        i;                                                          
                                                                                    
                    for (i = -(showPointNum-1); i <= 0; i++) {                                    
                        data.push({                                                 
                            x: time + i * timeInterval,                                     
                            y: Math.random()*(50+20)-20                                       
                        });                                                         
                    }                                                             
                    return data;                                                    
                })()                                                                
            }]                                                                      
        });                                                                         
    });                                                                             
                                                                                    
});               

$(function () {
    $('#container2').highcharts({
        chart: {
            type: 'spline'
        },
        title: {
            text: '统计分析'
        },
        /* subtitle: {
            text: 'Irregular time data in Highcharts JS'
        }, */
        xAxis: {
            type: 'datetime',
            dateTimeLabelFormats: { // don't display the dummy year
                month: '%e. %b',
                year: '%b'
            }
        },
        yAxis: {
            title: {
                text: 'Snow depth (m)'
            },
            min: 0
        },
        tooltip: {
            formatter: function() {
                    return '<b>'+ this.series.name +'</b><br/>'+
                    Highcharts.dateFormat('%e. %b', this.x) +': '+ this.y +' m';
            }
        },
        
        series: [{
            name: 'Winter 2007-2008',
            // Define the data points. All series have a dummy year
            // of 1970/71 in order to be compared on the same x axis. Note
            // that in JavaScript, months start at 0 for January, 1 for February etc.
            data: [
                [Date.UTC(1970,  9, 27), 0   ],
                [Date.UTC(1970, 10, 10), 0.6 ],
                [Date.UTC(1970, 10, 18), 0.7 ],
                [Date.UTC(1970, 11,  2), 0.8 ],
                [Date.UTC(1970, 11,  9), 0.6 ],
                [Date.UTC(1970, 11, 16), 0.6 ],
                [Date.UTC(1970, 11, 28), 0.67],
                [Date.UTC(1971,  0,  1), 0.81],
                [Date.UTC(1971,  0,  8), 0.78],
                [Date.UTC(1971,  0, 12), 0.98],
                [Date.UTC(1971,  0, 27), 1.84],
                [Date.UTC(1971,  1, 10), 1.80],
                [Date.UTC(1971,  1, 18), 1.80],
                [Date.UTC(1971,  1, 24), 1.92],
                [Date.UTC(1971,  2,  4), 2.49],
                [Date.UTC(1971,  2, 11), 2.79],
                [Date.UTC(1971,  2, 15), 2.73],
                [Date.UTC(1971,  2, 25), 2.61],
                [Date.UTC(1971,  3,  2), 2.76],
                [Date.UTC(1971,  3,  6), 2.82],
                [Date.UTC(1971,  3, 13), 2.8 ],
                [Date.UTC(1971,  4,  3), 2.1 ],
                [Date.UTC(1971,  4, 26), 1.1 ],
                [Date.UTC(1971,  5,  9), 0.25],
                [Date.UTC(1971,  5, 12), 0   ]
            ]
        }, {
            name: 'Winter 2008-2009',
            data: [
                [Date.UTC(1970,  9, 18), 0   ],
                [Date.UTC(1970,  9, 26), 0.2 ],
                [Date.UTC(1970, 11,  1), 0.47],
                [Date.UTC(1970, 11, 11), 0.55],
                [Date.UTC(1970, 11, 25), 1.38],
                [Date.UTC(1971,  0,  8), 1.38],
                [Date.UTC(1971,  0, 15), 1.38],
                [Date.UTC(1971,  1,  1), 1.38],
                [Date.UTC(1971,  1,  8), 1.48],
                [Date.UTC(1971,  1, 21), 1.5 ],
                [Date.UTC(1971,  2, 12), 1.89],
                [Date.UTC(1971,  2, 25), 2.0 ],
                [Date.UTC(1971,  3,  4), 1.94],
                [Date.UTC(1971,  3,  9), 1.91],
                [Date.UTC(1971,  3, 13), 1.75],
                [Date.UTC(1971,  3, 19), 1.6 ],
                [Date.UTC(1971,  4, 25), 0.6 ],
                [Date.UTC(1971,  4, 31), 0.35],
                [Date.UTC(1971,  5,  7), 0   ]
            ]
        }, {
            name: 'Winter 2009-2010',
            data: [
                [Date.UTC(1970,  9,  9), 0   ],
                [Date.UTC(1970,  9, 14), 0.15],
                [Date.UTC(1970, 10, 28), 0.35],
                [Date.UTC(1970, 11, 12), 0.46],
                [Date.UTC(1971,  0,  1), 0.59],
                [Date.UTC(1971,  0, 24), 0.58],
                [Date.UTC(1971,  1,  1), 0.62],
                [Date.UTC(1971,  1,  7), 0.65],
                [Date.UTC(1971,  1, 23), 0.77],
                [Date.UTC(1971,  2,  8), 0.77],
                [Date.UTC(1971,  2, 14), 0.79],
                [Date.UTC(1971,  2, 24), 0.86],
                [Date.UTC(1971,  3,  4), 0.8 ],
                [Date.UTC(1971,  3, 18), 0.94],
                [Date.UTC(1971,  3, 24), 0.9 ],
                [Date.UTC(1971,  4, 16), 0.39],
                [Date.UTC(1971,  4, 21), 0   ]
            ]
        }]
    });
});				
</script>

<div class="clear"></div>
<div style="border-top: 3px solid #c9e0ed;padding: 10px;margin: 10px 0px;">
</div>
<div class="clear"></div>

<div id="container" style="width:480px;height:250px;float:left"></div>

<div id="news" style="border: 1px solid #e3e3e3;width:396px;margin-left:30px;height:250px;float:left;color:#353131;font-family:'微软雅黑';font-size: 16px;">
	<div id="title" style="padding:5px 10px;float:left;height: 16px;line-height: 18px;width: 376px">
		<div id="arrow_img" style="background-image: url('<?php echo IMG_URL;?>/arrow.png');float: left;height: 16px;width:16px;"></div>
		<div style="height:16px; line-height:16px; width:80px; float:left; text-align:center;">最新新闻</div>
		<div style="height:16px; float:left; width:214px; background-image:url(<?php echo IMG_URL;?>/bar.png);"></div>
		<div id="more"><a href="index.php?r=news/index" target="_blank"><img src="<?php echo IMG_URL;?>/more.png" height="16" style="border:none;" /></a></div>
	</div>
	<div id="news_c" style="float: left;font-size: 14px;margin-top:0px;min-height: 216px;overflow: hidden;width: 396px;">
		<ul style="list-style-type:none">
		    <?php foreach ($index_news_list as $_v){?>
    		<li>
    		  <span id="left">
    		      <a href="index.php?r=news/view&id=<?php echo $_v['news_id']?>">
    		          <?php echo String::truncate_utf8_string($_v['news_title'],18)?>
    		      </a>
    		  </span>
    		  <span id="right">
    		      <?php echo date("Y-m-d",$_v['news_add_time'])?></span>
    		</li>
    		<?php }?>
	  </ul>
	</div>
</div>
    

<div class="clear"></div>
<div style="border-top: 3px solid #c9e0ed;padding: 10px;margin: 10px 0px;">
</div>
<div class="clear"></div>

<!--
<div id="container2" style="min-width:700px;height:400px"></div>
-->

<!--  
<p>You may change the content of this page by modifying the following two files:</p>
<ul>
	<li>View file: <code><?php echo __FILE__; ?></code></li>
	<li>Layout file: <code><?php echo $this->getLayoutFile('main'); ?></code></li>
</ul>

<p>For more details on how to further develop this application, please read
the <a href="http://www.yiiframework.com/doc/">documentation</a>.
Feel free to ask in the <a href="http://www.yiiframework.com/forum/">forum</a>,
should you have any questions.</p>
-->
